<template>
  <div class="record-detail">
    <c-title text="认购详情"></c-title>
    <ul class="list">
      <li class="info" v-for="(item,i) in list" :key="i">
        <p style="text-align: left; color: #a7a7a7; margin: 10px 0;">认购时间:{{item.created_at}}</p>
        <div class="flex between">
          <span>认购数量：{{item.quantity}}</span>
          <span>已用{{item.point_pay}}{{pluginName.point_name}},{{item.love_pay}}{{pluginName.love_name}}</span>
        </div>
        <div class="main">
          <div>
            <p>总返还</p>
            <p>{{item.full_point_return}}{{pluginName.point_name}}</p>
            <p>{{item.full_love_return}}{{pluginName.love_name}}</p>
          </div>
          <div>
            <p>已返还</p>
            <p>{{item.full_point_returned}}{{pluginName.point_name}}</p>
            <p>{{item.full_love_returned}}{{pluginName.love_name}}</p>
          </div>
          <div>
            <p>剩余可返</p>
            <p>{{item.full_point_surplus}}{{pluginName.point_name}}</p>
            <p>{{item.full_love_surplus}}{{pluginName.love_name}}</p>
          </div>
        </div>
        <div  class="flex between">
          <span>奖励{{pluginName.love_name}}{{item.full_love_award}}</span><span>奖励{{pluginName.point_name}}{{item.full_point_award}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {scrollMixin} from "../../utils/mixin";
export default {
  mixins:[scrollMixin],
  data() {
    return {
      list: [],
      isLoadMore:true,
      last_page:0,
      current_page:1,
      pluginName: {}
    };
  },
  activated() {
      if(this.$route.params.id){
          this.getData()
      }
  },
  methods:{
      getMoreData(){
          this.isLoadMore = false;
        if(this.current_page>=this.last_page){
            return;
        }
        let page = this.current_page + 1;

        $http.post('plugin.subscription.frontend.modules.member.controllers.detail.index',{page,stage_id:this.$route.params.id}).then(res => {
              if(res.result == 0){
                  return this.$toast(res.msg)
              }
              this.list = this.list.concat(res.data.buy_list.data) || [];
              this.last_page = res.data.buy_list.last_page;
              this.current_page = page;
          })
      },
      getData(){
          $http.post('plugin.subscription.frontend.modules.member.controllers.detail.index',{stage_id:this.$route.params.id}).then(res => {
              if(res.result == 0){
                  return this.$toast(res.msg)
              }
              this.list = res.data.buy_list.data || [];
              this.last_page = res.data.buy_list.last_page;
              this.pluginName.love_name = res.data.love_name;
              this.pluginName.point_name = res.data.point_name;
          })
      }
  }
};
</script>

<style lang="scss" scoped>
.record-detail {
  .flex {
    display: flex;
  }

  .between {
    justify-content: space-between;
  }

  .info {
    padding: 0.625rem;
    background-color: #fff;
    margin: 0.625rem;
    font-size: 0.75rem;
  }

  .main {
    display: flex;
    justify-content: space-between;
    text-align: center;
    background-color: #fffaef;
    margin: 0.625rem 0;
    color: #db6706;
    padding: 0 1.0625rem;
    font-size: 0.75rem;

    p {
      margin-top: 0.625rem;
      margin-bottom: 0.625rem;
    }
  }
}
</style>